<template>
  <div class="cate-container">
    <div class="oper-btn">
      <el-button type="primary" round plain size="medium" @click="addCate"
        >新增分类</el-button
      >
    </div>
    <el-table
      :data="cateList"
      style="width: 100%"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="类别序号" width="180">
      </el-table-column>
      <el-table-column prop="catename" label="分类名称" width="180">
      </el-table-column>
      <el-table-column prop="img" label="分类图片">
        <template v-slot="prop">
          <el-image
            v-if="prop.row.pid !== 0"
            style="width: 200px; height: 160px"
            :src="'http://192.168.11.218:3000/' + prop.row.img"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="prop">
          <el-button
            type="primary"
            round
            plain
            size="mini"
            v-if="prop.row.status === 1"
            >正常</el-button
          >
          <el-button type="warning" round plain size="mini" v-else
            >禁用</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="prop">
          <el-button type="warning" size="mini" @click="editCate(prop)"
            >编辑</el-button
          >
          <el-button type="primary" size="mini" @click="deleteCate(prop)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <CateDialog :boxShow="boxShow" ref="cateDialog"></CateDialog>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import CateDialog from "./CateDialog.vue";

export default {
  created() {
    this.initCateListActions();
  },
  computed: {
    ...mapState("cate", ["cateList"]),
  },
  methods: {
    ...mapActions("cate", ["initCateListActions", "deleteCateListActions"]),
    addCate() {
      this.boxShow.isShow = true;
    },
    deleteCate(prop) {
      this.$confirm("此操作将永久删除该类别, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteCateListActions(prop.row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editCate(prop) {
      // 给子组件中的表单赋值
      this.$refs.cateDialog.cateForm = prop.row
      // 给子组件中的图片列表赋值
      this.$refs.cateDialog.fileList.push({
        url: "http://192.168.11.218:3000/" + prop.row.img,
      });
      this.boxShow.isShow = true;
    },
  },
  components: {
    CateDialog,
  },
  data() {
    return {
      boxShow: {
        isShow: false,
      },
    };
  },
};
</script>

<style>
.oper-btn{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>